<script lang="ts" setup>
const props = defineProps<{
  placeholder: string;
}>();

const emits = defineEmits(["change"]);

const inputCb = (e: any) => {
  const value = e?.target?.value || "";
  emits("change", value);
};
</script>
<template>
  <div class="input-wrapper">
    <slot name="prefix"></slot>
    <input :placeholder="props.placeholder || 'please input'" class="input" @input="inputCb" />
    <slot name="suffix" class="suffix"></slot>
  </div>
</template>
<style lang="less" scoped>
@padding: 12px;

.input-wrapper {
  width: 100%;
  height: 44px;
  padding: @padding 0 @padding 8px;
  box-sizing: border-box;
  border-radius: 7px;
  background: rgba(247, 247, 247, 1);
  border: 1px solid rgba(214, 217, 221, 1);
  display: flex;
  align-items: center;

  .input {
    background: transparent;
    height: 18px;
    line-height: 18px;
    font-size: 15px;
    margin-left: 11px;
    border: none;
    width: 100%;
    padding-right: @padding;
  }
}
</style>
